<template>
  <view class="login-container planet-bg">
    <!-- 星空背景 -->
    <view class="stars">
      <view v-for="star in stars" :key="star.id" class="star" :style="star.style"></view>
    </view>
    
    <!-- 登录表单卡片 -->
    <view class="login-card">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png"></image>
        <text class="app-name">星球漂流瓶</text>
      </view>
      
      <form class="login-form">
        <view class="form-item">
          <view class="input-wrapper">
            <text class="icon">👤</text>
            <input 
              class="input" 
              type="text" 
              v-model="username" 
              placeholder="请输入用户名" 
              placeholder-class="placeholder"
            />
          </view>
        </view>
        
        <view class="form-item">
          <view class="input-wrapper">
            <text class="icon">🔒</text>
            <input 
              class="input" 
              type="password" 
              v-model="password" 
              placeholder="请输入密码" 
              placeholder-class="placeholder"
            />
          </view>
        </view>
        
        <button 
          class="btn btn-primary login-btn"
          @tap="handleLogin"
          :disabled="isLoading"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        
        <view class="login-footer">
          <text class="register-link" @tap="goToRegister">注册账号</text>
          <text class="forgot-password">忘记密码？</text>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
  import { login } from '../../src/api/logon/logonApi';
  import { showToast } from '../../src/common/tools';
  
  export default {
    data() {
      return {
        username: '',
        password: '',
        isLoading: false,
        stars: []
      };
    },
    onLoad() {
      // 初始化星空背景
      this.initStars();
    },
    methods: {
      // 初始化星空背景
      initStars() {
        const starCount = 100;
        const tempStars = [];
        
        for (let i = 0; i < starCount; i++) {
          // 随机位置
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          
          // 随机动画时长
          const duration = 2 + Math.random() * 3;
          
          // 随机大小
          const size = 1 + Math.random() * 3;
          
          // 随机透明度
          const opacity = 0.3 + Math.random() * 0.7;
          
          tempStars.push({
            id: `star-${i}`,
            style: {
              left: `${x}%`,
              top: `${y}%`,
              width: `${size}rpx`,
              height: `${size}rpx`,
              opacity: opacity,
              '--duration': `${duration}s`
            }
          });
        }
        
        this.stars = tempStars;
      },
      
      // 登录处理
      async handleLogin() {
        // 表单验证
        if (!this.username.trim()) {
          showToast('请输入用户名');
          return;
        }
        
        if (!this.password.trim()) {
          showToast('请输入密码');
          return;
        }
        
        try {
          this.isLoading = true;
          
          const result = await login({
            username: this.username.trim(),
            password: this.password.trim()
          });
          
          if (result.success) {
            showToast('登录成功', 'success');
            // 登录成功后跳转到首页
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }, 1500);
          } else {
            showToast(result.message || '登录失败');
          }
        } catch (error) {
          showToast('登录失败，请检查网络或重试');
          console.error('登录异常:', error);
        } finally {
          this.isLoading = false;
        }
      },
      
      // 跳转到注册页面
      goToRegister() {
        uni.navigateTo({
          url: '/pages/logon/register'
        });
      }
    }
  };
</script>

<style scoped>
  @import '../../src/style/global.scss';
  
  .login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
  }
  
  .login-card {
    width: 100%;
    max-width: 600rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10rpx);
  }
  
  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;
  }
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;
    border-radius: 50%;
    background-color: var(--white);
    padding: 10rpx;
  }
  
  .app-name {
    font-size: 40rpx;
    font-weight: bold;
    color: var(--primary-color);
  }
  
  .login-form {
    width: 100%;
  }
  
  .form-item {
    margin-bottom: 30rpx;
  }
  
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--white);
    border-radius: 8rpx;
    border: 2rpx solid var(--border-color);
    transition: border-color 0.3s ease;
  }
  
  .input-wrapper:focus-within {
    border-color: var(--primary-color);
  }
  
  .icon {
    padding: 0 20rpx;
    font-size: 32rpx;
  }
  
  .input {
    flex: 1;
    height: 88rpx;
    border: none;
    outline: none;
    font-size: 28rpx;
    color: var(--text-color);
  }
  
  .placeholder {
    color: var(--text-placeholder);
  }
  
  .login-btn {
    width: 100%;
    height: 96rpx;
    font-size: 32rpx;
    font-weight: bold;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 8rpx;
    margin: 40rpx 0;
  }
  
  .login-btn:active {
    background-color: #40a9ff;
  }
  
  .login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
  }
  
  .register-link {
    color: var(--primary-color);
  }
  
  .forgot-password {
    color: var(--text-secondary);
  }
</style>